import { Component, OnInit, Input, OnChanges } from '@angular/core';

export enum RoadCondition {
    smooth = 1,
    heavy
}

@Component({
    selector: 'itmp-three-roads',
    templateUrl: './three-roads.component.html',
    styleUrls: ['./three-roads.component.css']
})
export class ThreeRoadsComponent implements OnInit, OnChanges {
    @Input() data: any;
    @Input() titletext: String;
    options: any;

    constructor() {}

    ngOnChanges() {
        if (!this.data) {
            return;
        }
        this.options = {
            legend: {
                right: 20,
                top: 0,
                textStyle: {
                    color: '#ffffff' //图例颜色
                }
            },
            tooltip: {},
            dataset: {
                source: this.data
            },
            grid: { containLabel: true, left: '5%', right: '15%' },
            xAxis: {
                name: 'Avg Speed (km/h)',
                nameLocation: 'center',
                nameGap: 25,
                axisLabel: {
                    show: true,
                    textStyle: {
                        //x轴座标文字颜色
                        color: '#fff'
                    },
                    color: '#fff'
                },
                axisLine: {
                    lineStyle: {
                        type: 'solid',
                        color: '#fff', //左边线的颜色
                        width: '1' //坐标线的宽度
                    }
                }
            },
            yAxis: {
                type: 'category',
                axisLabel: {
                    show: true,
                    textStyle: {
                        //轴座标文字颜色
                        color: '#fff'
                    }
                }
            },
            visualMap: {
                show: false,
                orient: 'horizontal',
                left: 'center',
                hoverLink: false,
                min: RoadCondition.smooth,
                max: RoadCondition.heavy,
                text: ['The Most Congestion', 'The Most Smooth'],
                // Map the score column to color
                dimension: 0,
                inRange: {
                    color: ['#40b6aa', '#c60202']
                }
            },
            series: [
                {
                    type: 'bar',
                    encode: {
                        // Map the "amount" column to X axis.
                        x: 'avg_speed',
                        // Map the "product" column to Y axis
                        y: 'road'
                    },
                    label: {
                        show: true,
                        position: 'right',
                        valueAnimation: true
                    }
                }
            ]
        };
    }

    ngOnInit() {}
}
